﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Master.Master" Inherits="System.Web.Mvc.ViewPage<OnlineMovieTicket.Model.MovieTimeTable>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link type="text/css" href="<%= Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" /> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.2.js") %>" ></script>  
<script type="text/javascript" src="<%= Url.Content("~/Scripts/ui/jquery.ui.core.js") %>"></script> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/ui/jquery.ui.widget.js") %>"></script> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/ui/jquery.ui.datepicker.js") %>"></script>     
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
 <script type="text/javascript" >
     $(function () {         
         var date = $('#ShowingDate').datepicker({ dateFormat: 'dd-MM-yy' });
         GetCinemaHallList();
     });

 </script>
         <table cellpadding="0" cellspacing="0"  class="pageBackGround">
                                    <tr height="10px"><% Html.EnableClientValidation(); %>
                                                      <% using (Html.BeginForm()) {%></tr>
                                    <tr><td class="fontWhite">
                                        <table bgcolor="white">            
                                            <tr><td>                
                                                <table cellpadding="6" cellspacing="6" width="975px" class="pageBackGround">
                                                    <tr><td class="fontWhiteBold" colspan="3"><h2>Cinemas - Create Movie</h2></td></tr>
                                                    <tr>
                                                        <td width="15%">Movies</td><td width="1px">:</td><td> <%= Html.DropDownListFor(model => model.MovieCode, (SelectList)ViewData["MovieList"]) %></td>
                                                    </tr>
                                                    <tr><td>Cinemas</td><td width="1px">:</td><td><%= Html.DropDownList("DdlCinema", (SelectList)ViewData["CinemaList"]) %></td></tr>
                                                    <tr><td>Cinema Halls</td><td width="1px">:</td><td><%= Html.DropDownList("DdlCinemaHall", new SelectList(new List<OnlineMovieTicket.Model.CinemaHall>(),"CinemaHallID", "CinemaHallName")) %></td></tr>
                                                    <tr><td>Showing Date</td><td width="1px">:</td><td> <%= Html.TextBox("ShowingDate",DateTime.Today.Date.ToString("dd-MMM-yyyy"))%>
                                                                                     <%= Html.ValidationMessageFor(model => model.ShowingDate) %></td></tr>
                                                    <tr><td>Show Times</td><td>:</td>
                                                    <td>  <%= Html.DropDownListFor(model=> model.ScheduleID, new SelectList(new List<OnlineMovieTicket.Model.CinemaTimeTable>(),"ScheduleID", "StartTime")) %>
                                                               <%= Html.ValidationMessageFor(model => model.ScheduleID) %></td></tr>
                                                    <tr><td colspan="3"><input type="submit" value="Create" class="btn" /></td></tr>
                                                    <tr><td colspan="3" height="10px"></td></tr>
                                                    <tr><td colspan="3" height="10px"> <%= Html.ActionLink("Back to Search", "Search") %></td></tr>
                                                </table>            
                                            </td></tr>
                                        </table>    
                                    </td></tr>
                                    <tr><td height="10px"></td></tr>
                </table>
                <% } %>
    <script type="text/javascript" >
        $(document).load
        //Hook onto the MakeID list's onchange event
        $(document).ready(function () {
            $("#DdlCinema").change(function () {
                GetCinemaHallList();
            });

            $("#ShowingDate").change(function () {                
                if ($("#DdlCinemaHall").val() != '0') {
                    GetCinemaTimeTable();
                }
            });

            $("#DdlCinemaHall").change(function () {

                //alert("hellow onchanged");

                if ($("#ShowingDate").val() != $("#ShowingDate").get()[0].defaultValue) {
                    //build the request url   
                    GetCinemaTimeTable();
                }
            });

        });

        function GetCinemaHallList() {

            //build the request url   
            var url = "/MovieAssignment/GetCinemaHallList";
            //turn off cache
            $.ajaxSetup({ cache: false });
            //fire off the request, passing it the id which is the MakeID's selected item value   
            $.getJSON(url, { CinemaID: $("#DdlCinema").val() }, function (data) {
                //Clear the Model list   
                $("#DdlCinemaHall").empty();

                //Foreach Model in the list, add a model option from the data returned   
                $.each(data, function (index, optionData) {
                    $("#DdlCinemaHall").append("<OPTION value='" + optionData.Value + "'>" + optionData.Text + "</OPTION>");
                });

            });
        }

        function GetCinemaTimeTable() {

            var url = "/MovieAssignment/GetAvailableCinemaTimeTableList";
            // turn off cache
            $.ajaxSetup({ cache: false });

            //fire off the request, passing it the id which is the MakeID's selected item value   
            
            $.getJSON(url, { CinemaHallID: $("#DdlCinemaHall").val(), showingDate: $("#ShowingDate").val() }, function (data) {
                //Clear the Model list   
                $("#ScheduleID").empty();

                //Foreach Model in the list, add a model option from the data returned   
                $.each(data, function (index, optionData) {
                    var StartDateTime = new Date(optionData.Text);
                    var Time;

                    if (StartDateTime.getHours().toString().length < 2)
                        Time = '0' + StartDateTime.getHours().toString() + ':';
                    else
                        Time = StartDateTime.getHours().toString() + ':';
                    if (StartDateTime.getMinutes().toString().length < 2)
                        Time = Time + '0' + StartDateTime.getMinutes().toString() + ':';
                    else
                        Time = Time + StartDateTime.getMinutes().toString() + ':';

                    if (StartDateTime.getSeconds().toString().length < 2)
                        Time = Time + '0' + StartDateTime.getSeconds().toString() + ' ';
                    else
                        Time = Time + StartDateTime.getSeconds().toString() + ' ';

                    $("#ScheduleID").append("<OPTION value='" + optionData.Value + "'>" + Time + "</OPTION>");


                    //$("#DdlShowTimes").append("<OPTION value='" + optionData.Value + "'>" + StartDateTime.getHours() + ':' + StartDateTime.getMinutes() + ':' + StartDateTime.getSeconds() + "</OPTION>");
                    //$("#DdlShowTimes").append("<OPTION value='" + optionData.Value + "'>" + optionData.Text + "</OPTION>");
                });

            });
        }

    </script>
</asp:Content>

